<template>
    <div v-if="show || loginshow">
      <div class="ant-modal-root">
        <div class="ant-modal-mask"></div>
        <div tabindex="-1" class="ant-modal-wrap" role="dialog">
          <div class="ant-modal" role="document" style="width: 480px; transform-origin: 1093px -62px;overflow: hidden">
            <div class="ant-modal-content" style="height: 480px;">
              <button type="button" aria-label="Close" @click="handleClose" class="ant-modal-close"><span class="ant-modal-close-x"><span
                  role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon"><svg focusable="false"
                                                                                                        class=""
                                                                                                        data-icon="close"
                                                                                                        width="1em"
                                                                                                        height="1em"
                                                                                                        fill="currentColor"
                                                                                                        aria-hidden="true"
                                                                                                        viewBox="64 64 896 896"><path
                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span>
              </button>
              <div class="ant-modal-body">
                <div class="sign-container2">
                  <div class="ant-row ant-row-center" type="flex" style="row-gap: 0px;">
                    <div class="ant-col ant-col-24" v-if="expand"  style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
                      <h3 class="fz24 fw c333">打开微信扫码注册/登录</h3>
                      <p style="margin-top: 10px;" class="c333">「极速登录和注册」告别短信验证码</p>
                      <div class="qrcode" id="login_container">
                         <a href="javascript:void(0);" class="refresh-link" title="点击刷新" @click.prevent="handleChangeState"><svg t="1705789469450" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5054" width="20" height="20"><path d="M379.392 870.4c-92.672-44.828-171.918-143.19-198.03-245.76-24.576-96.484-6.258-200.932 50.517-288.54 48.81-75.208 117.191-125.896 217.316-161.11 24.69-8.704 44.942-18.375 44.942-21.56 0-3.13-10.923-16.612-24.292-29.924-27.306-27.193-29.582-36.921-12.401-54.272 19.91-20.139 36.58-16.327 71.68 16.327 16.839 15.644 46.592 41.301 66.104 57.003 38.23 30.72 47.616 44.6 42.895 63.601-2.674 10.468-57.856 82.774-98.816 129.48-19.229 21.902-32.086 27.59-46.82 20.82a44.373 44.373 0 0 1-17.75-16.497c-7.11-13.54-0.682-27.762 28.787-63.374 10.808-13.085 19.74-25.6 19.74-27.705 0-7.794-25.657-10.013-54.955-4.722-51.257 9.216-96.825 34.987-141.994 80.213-22.528 22.585-45.227 50.745-52.167 64.683-48.925 98.361-46.536 211.797 6.371 302.763 24.462 41.927 81.237 95.858 122.937 116.622 96.825 48.242 204.345 45.397 294.684-7.737C806.4 737.166 867.556 601.26 842.183 480.825c-8.704-41.529-34.36-98.247-59.278-131.3-22.699-30.037-28.274-43.235-24.633-58.026 3.925-15.759 26.34-24.406 42.382-16.27 28.445 14.279 82.375 99.669 99.84 157.98 13.938 46.364 12.686 155.079-2.275 203.947-13.085 42.666-46.251 108.373-69.632 138.069-24.178 30.72-78.507 75.207-116.054 95.232-59.164 31.403-143.417 46.08-213.56 37.205-46.308-5.86-70.145-13.312-119.581-37.262z" p-id="5055"></path></svg></a>
                         <k-wx-login
                                  :key="stateRef"
                                  appid="wx26e1928e2b3d8260"
                                  :state="stateRef"
                                  href="https://study512.oss-cn-shenzhen.aliyuncs.com/weixin-login.css"
                                  :redirect_uri="platformSystem.domain+'/api/login/weixin/login?systemid='+systemId+'_0'"></k-wx-login>
                      </div>
                      <p><a href="javascrit:void(0)" class="c999" @click="expand=false">点击账号登录</a></p>
                    </div>
                    <div class="ant-col ant-col-9" v-else>
                      <h2 class="fz24 text-center fw c333">账号登录</h2>
                      <form class="el-form el-form--default el-form--label-right" style="margin-top: 15px; width: 308px;">
                        <div class="el-form-item asterisk-left" style="height: 40px;">
                          <div class="el-form-item__content">
                            <div style="position: relative;">
                              <div class="el-input el-input--large  phone-input" style="width: 310px; position: absolute; left: 0px; z-index: 9;">
                                <div class="el-input__wrapper" role="button" tabindex="-1">
                                  <svg t="1700901368178" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6641" width="16" height="16"><path d="M438.272 603.648c-132.608 0-240.64-108.032-240.64-240.64s108.032-240.64 240.64-240.64 240.64 108.032 240.64 240.64-108.032 240.64-240.64 240.64z m0-419.84c-98.816 0-179.2 80.384-179.2 179.2s80.384 179.2 179.2 179.2 179.2-80.384 179.2-179.2-80.384-179.2-179.2-179.2z" p-id="6642" fill="#8a8a8a"></path><path d="M832.512 955.904h-30.72c-257.536-1.536-361.984 0-363.008 0H44.032v-30.72c0-209.408 165.888-361.984 394.24-361.984s394.24 152.064 394.24 361.984v30.72z m-725.504-61.44h331.264c0.512 0 96.256-1.536 331.264 0-15.36-157.696-150.016-269.312-331.264-269.312-181.248-0.512-315.904 111.104-331.264 269.312zM715.776 538.112l-35.84-49.664C732.16 450.56 762.88 390.144 762.88 326.144c0-97.792-72.704-182.272-168.96-196.608l9.216-60.928c126.464 18.944 221.184 129.536 221.184 257.536 0 83.968-40.448 162.816-108.544 211.968z" p-id="6643" fill="#8a8a8a"></path><path d="M964.096 882.176l-58.368-19.456c8.192-24.576 12.288-50.176 12.288-76.288 0-131.072-107.008-238.08-238.08-238.08V486.4c165.376 0 299.52 134.144 299.52 299.52 0.512 32.768-5.12 65.024-15.36 96.256z" p-id="6644" fill="#8a8a8a"></path><path d="M964.096 881.664h-67.072l9.216-20.48h57.856zM603.136 129.536H593.92v-61.44l9.216 0.512z" p-id="6645" fill="#8a8a8a"></path></svg>
                                  <input maxlength="60" id="tel" @keyup.enter.prevent="handleDialogLogin" v-model="userLogin.telephone" class="el-input__inner" type="text" autocomplete="off" tabindex="0" placeholder="手机号、账号"></div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="el-form-item asterisk-left" style="height: 40px;">
                          <div class="el-form-item__content">
                            <div style="position: relative;">
                              <div class="el-input el-input--large  phone-input"  style="width: 310px; position: absolute; left: 0px; z-index: 9;">
                                <div class="el-input__wrapper pr" role="button" tabindex="-1">
                                  <svg t="1700901180166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6125" width="15" height="15"><path d="M866 384h-34v-64c0-43-8.5-84.9-25.3-124.3-16.1-38.1-39.3-72.3-68.7-101.7-29.4-29.4-63.6-52.5-101.7-68.7C596.9 8.5 555 0 512 0s-84.9 8.5-124.3 25.3C349.6 41.4 315.4 64.6 286 94s-52.5 63.6-68.7 101.7C200.5 235.1 192 277 192 320v64h-34c-51.8 0-94 42.2-94 94v452c0 51.8 42.2 94 94 94h708c51.8 0 94-42.2 94-94V478c0-51.8-42.2-94-94-94z m-614-64c0-69.1 27.1-134.3 76.4-183.6S442.9 60 512 60s134.3 27.1 183.6 76.4C744.9 185.7 772 250.9 772 320v64H252v-64z m648 610c0 18.7-15.3 34-34 34H158c-18.7 0-34-15.3-34-34V478c0-18.7 15.3-34 34-34h708c18.7 0 34 15.3 34 34v452z" fill="#8a8a8a" p-id="6126"></path><path d="M512 608c-16.5 0-30 13.5-30 30v132c0 16.5 13.5 30 30 30s30-13.5 30-30V638c0-16.5-13.5-30-30-30z" fill="#8a8a8a" p-id="6127"></path></svg>
                                  <input maxlength="16" id="pwd" @keyup.enter.prevent="handleDialogLogin" v-model="userLogin.password" class="el-input__inner" type="password" autocomplete="off" tabindex="0" placeholder="密码"></div>
                                <nuxt-link v-if="false" :to="'/forget?from='+route.fullPath" style="position: absolute;right:5px;font-size: 11px;color:#999">忘记密码？</nuxt-link>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="el-form-item asterisk-left" style="height: 40px;"  v-if="errorCount >= 3">
                          <div class="el-form-item__content">
                            <div style="position: relative;">
                              <div class="el-input el-input--large  phone-input"  style="width: 310px; position: absolute; left: 0px; z-index: 9;">
                                <div class="el-input__wrapper" role="button" tabindex="-1">
                                  <svg t="1700903395331" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7969" width="18" height="18"><path d="M512 173.412c67.566 64.735 166.266 90.15 277.688 118.838 6.421 1.65 12.928 3.328 19.5 5.025v101.231c0 56.597-7.688 113.55-22.857 169.285-14.822 54.459-35.915 104.643-62.681 149.165-26.494 44.063-56.981 79.913-90.6 106.547-33.131 26.25-67.96 42.31-103.528 47.738l-14.972 2.287-19.406-2.916c-35.644-5.362-70.547-21.375-103.753-47.596-33.694-26.607-64.247-62.447-90.807-106.528-26.84-44.532-47.98-94.754-62.85-149.25-15.206-55.782-22.922-112.8-22.922-169.463v-100.49c6.572-1.707 13.088-3.376 19.51-5.035C345.744 263.562 444.444 238.147 512 173.412m0-83.615c-5.334 0-10.669 2.569-14.119 7.697-59.625 88.875-179.006 109.894-330.056 150.075-7.65 2.034-13.012 9.225-13.012 17.484v132.731c0 251.522 141.215 503.57 331.415 532.163l28.388 4.266 23.953-3.657c189.834-28.96 330.619-280.837 330.619-532.04V265.053c0-8.26-5.372-15.45-13.013-17.484-151.05-40.181-270.431-61.2-330.056-150.075-3.44-5.138-8.785-7.697-14.119-7.697z" p-id="7970" fill="#8a8a8a"></path><path d="M504.64 645.922a30.028 30.028 0 0 1-21.018-8.588l-145.8-143.128c-11.822-11.606-12-30.6-0.394-42.422s30.6-12 42.422-0.393l123.544 121.275L684.2 373.569c11.137-12.263 30.112-13.182 42.375-2.044 12.262 11.137 13.181 30.113 2.044 42.375L526.84 636.088a30 30 0 0 1-21.347 9.815c-0.281 0.019-0.572 0.019-0.853 0.019z" p-id="7971" fill="#8a8a8a"></path></svg>
                                  <input maxlength="4" id="code" @keyup.enter.prevent="handleDialogLogin" v-model="userLogin.verifyCode" class="el-input__inner" type="text" autocomplete="off" tabindex="0" placeholder="验证码"></div>
                                <div class="chakra-input__right-element css-7gltpu">
                                  <img alt="验证码" :src="base64ImgRef" @click="handleLoadCaptcha"/>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="el-form-item asterisk-left">
                          <div class="el-form-item__content">
                            <button class="ant-btn ant-btn-primary ant-btn-lg" type="button" @click="handleDialogLogin"
                                    style="width: 310px; margin-top: 30px;"><span>立即登录</span></button>
                          </div>
                        </div>
                        <div class="el-form-item__contentx">
                          <div class="w100 c999 pointer" style="text-align: center">
                              <span @click="expand=true" >微信扫码登录</span>
                              <nuxt-link v-if="false" :to="'/register?from='+route.fullPath">点击注册</nuxt-link>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
                <div class="el-form-item">
                  <div class="el-form-item__contentx w100" style="text-align: center">
                          <span class="des-span c666">登录或注册即同意
                            <a target="_blank" href="/page/yinsi.html" class="c999">《隐私政策》</a>与
                            <a target="_blank" href="/page/userxieyi.html" class="c999">《用户服务协议》</a>
                          </span>
                  </div>
                </div>
              </div></div>
            <div tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
          </div>
        </div>
      </div>
    </div>
</template>
<script setup>
import {getSystemId,defaultDomain} from "@/config/common.js"
const platformSystem =  ref({domain:defaultDomain})
const route = useRoute()
var loginStore = useStore.loginState()
// 把用户信息存放于pinia状态管理
const userStore = useStore.userState()
var show = computed(()=>loginStore.loginFlag)
const stateRef = ref(new Date().getTime())
const systemId = ref(getSystemId)
var logintimer = null
var endtimer = null
var periodtimer = null
var loginshow = ref(false)
const emits = defineEmits(["success"])
const persionnum = ref(1800)
// 图片验证码接受
const base64ImgRef = ref("")
// 错误计数器 --用于监听登录出错的次数
const errorCount = ref(0)
const expand = ref(true)
let timer = null
// 定义用户登录对象
const userLogin = ref({
  telephone: "",
  password: "",
  captchaId: "",
  errorCount: "",
  verifyCode: ""
})

watch(expand,()=>{
    if(!expand.value){
      nextTick(()=>{
        if(timer)clearTimeout(timer)
        timer = setTimeout(()=>{
          getDom("tel").value = "";
          getDom("pwd").value = "";
          getDom("tel").focus()
        },1000)
      })

    }
})

const handleChangeState = () =>{
  stateRef.value = new Date().getTime()
  useLoading().finish()
  persionnum.value = 1800
  if(periodtimer)clearInterval(periodtimer)
  if(logintimer)clearInterval(logintimer)
  periodtimer = setInterval(handleListenerPeriod,1000)
  logintimer = setInterval(handleListenerWXLoginCallback,3000)
}

// 监听窗口打开就执行轮询，每隔3秒执行一次，来获取用户是否登录如果登录会在服务端根据state和ip做为key，把uuid作为值写入缓存中
// 然后每隔三秒回个根据state和ip不停的去缓存中获取uuid。 如果获取到就直接登录
watch(show,async (swatch)=>{
   if(swatch){
     // 立即执行一次
     handleListenerWXLoginCallback()
     handleListenerPeriod()
     if(periodtimer)clearInterval(periodtimer)
     if(logintimer)clearInterval(logintimer)
     if(endtimer)clearTimeout(endtimer)
     periodtimer = setInterval(handleListenerPeriod,1000)
     logintimer = setInterval(handleListenerWXLoginCallback,3000)
     endtimer = setTimeout(()=>{
       useMessage().info("请重新刷新二维码，进行登录操作!")
       if(logintimer)clearInterval(logintimer)
       if(periodtimer)clearInterval(periodtimer)
       if(endtimer)clearTimeout(endtimer)
     },1000 * 120)
   }else{
     if(logintimer)clearInterval(logintimer)
     if(periodtimer)clearInterval(periodtimer)
     if(endtimer)clearTimeout(endtimer)
   }
})

// 监听支付轮询回调的方法
const handleListenerWXLoginCallback = async ()=>{
    useLoading().start()
    const resp = await useWexinLoginCallbackApi(stateRef.value,0)
    if(logintimer)clearInterval(logintimer)
    // 2：获取登录路由参数，是否存在from.如果存在登录以后就跳转到from指定的地址
    // 写入token到cookie中
    useCache("TOKEN").setCache(resp.data.uuid)
    const userStore = useStore.userState()
    userStore.setLoginUserInfo(resp.data)
    resp.data.telephone = "";
    if(process.client)localStorage.setItem("kva-nuxt-userlogin",JSON.stringify(resp.data))
    // 放入到缓存中
    useLoading().finish()
    useMessage().success("欢迎回到学习512大家庭，继续学习!")
    userLogin.value = {
      telephone: "",
      password: "",
      captchaId: "",
      errorCount: "",
      verifyCode: ""
    }
    errorCount.value = 0
    emits("success",resp.data)
    // 4: 登录成功返回首页
    handleClose()

}

// 轮询过期二维码刷新的问题
const handleListenerPeriod = ()=>{
  persionnum.value --
  if(persionnum.value<=0) {
    persionnum.value = 1800
    handleChangeState()
  }
}

// 加载验证码
const handleLoadCaptcha = debounce(async () => {
  const resp = await useLoadCaptchaApi()
  const {base64Img, captchaId} = resp.data
  base64ImgRef.value = base64Img
  userLogin.value.captchaId = captchaId
}, 30)


const handleOpen = () => {
  loginStore.setLoginOpen(true)
  loginshow.value = true
  if(logintimer)clearInterval(logintimer)
  if(periodtimer)clearInterval(periodtimer)
}

const handleClose = () => {
  loginStore.setLoginOpen(false)
  loginshow.value = false
  useLoading().finish()
  if(logintimer)clearInterval(logintimer)
  if(periodtimer)clearInterval(periodtimer)
  if(endtimer)clearTimeout(endtimer)
}

// 登录的具体逻辑
const handleDialogLogin = debounce(async () => {
  try {
    if (!userLogin.value.telephone) {
      useMessage().error("请输入账号")
      getDom("tel").focus()
      return;
    }

    if (!userLogin.value.password) {
      useMessage().error("请输入密码");
      getDom("pwd").focus()
      return;
    }

    if (!userLogin.value.verifyCode && errorCount.value >= 3) {
      useMessage().error("请输入验证码");
      getDom("code").focus()
      return;
    }

    useLoading().start()
    // 发起异步请求----
    const params = {...userLogin.value}
    // 登录服务请求
    const resp = await useLoginApi(params)
    // 2：获取登录路由参数，是否存在from.如果存在登录以后就跳转到from指定的地址
    // 写入token到cookie中
    useCache("TOKEN").setCache(resp.data.uuid)
    const userStore = useStore.userState()
    userStore.setLoginUserInfo(resp.data)
    resp.data.telephone = "";
    if(process.client)localStorage.setItem("kva-nuxt-userlogin",JSON.stringify(resp.data))
    // 放入到缓存中
    useLoading().finish()
    useMessage().success("欢迎回到学习512大家庭，继续学习!")
    userLogin.value = {
      telephone: "",
      password: "",
      captchaId: "",
      errorCount: "",
      verifyCode: ""
    }
    errorCount.value = 0
    emits("success",resp.data)
    // 4: 登录成功返回首页
    handleClose()
  } catch (e) {
    useLoading().finish()
    useMessage().error(e.message)
    // 找不到用户信息 或者 账号或者密码有误
    if (e.code == 601) {
      // 把服务端错误计算器要获取到。用户输错三次激活验证码
      if (errorCount.value < 3) {
        errorCount.value = e.data
      }
      handleLoadCaptcha()
      userLogin.value.password = ""
      userLogin.value.verifyCode = ""
      getDom("pwd").focus()
    }
    // 你输入的验证码有误
    if (e.code == 602) {
      handleLoadCaptcha()
      errorCount.value = 3
      userLogin.value.verifyCode = ""
      getDom("code").focus()
    }

    // 请输入验证码
    if (e.code == 603) {
      errorCount.value = 3
      getDom("code").focus()
    }
  }
}, 500)

// 监听错误计数器errorCount到达次数3次就显示验证码
watch(errorCount, (nval) => {
  if (nval >= 3) {
    userLogin.value.errorCount = nval
    handleLoadCaptcha()
  }
})


onUnmounted(()=>{
  if(logintimer)clearInterval(logintimer)
  if(periodtimer)clearInterval(periodtimer)
  if(endtimer)clearTimeout(endtimer)
  // 放入到缓存中
  useLoading().finish()
})

defineExpose({
  handleOpen
})

</script>

<style scoped>
.ant-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap
}

.ant-row, .ant-row:after, .ant-row:before {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

.ant-row-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center
}

.ant-col {
  max-width: 100%;
  min-height: .0625rem;
  position: relative
}

.ant-col-10 {
  -webkit-box-flex: 0;
  display: block;
  -webkit-flex: 0 0 41.66666667%;
  -ms-flex: 0 0 41.66666667%;
  flex: 0 0 41.66666667%;
  max-width: 41.66666667%
}

.ant-col-7 {
  -webkit-box-flex: 0;
  display: block;
  -webkit-flex: 0 0 29.16666667%;
  -ms-flex: 0 0 29.16666667%;
  flex: 0 0 29.16666667%;
  max-width: 29.16666667%
}

.ant-col-2 {
  -webkit-box-flex: 0;
  display: block;
  -webkit-flex: 0 0 8.33333333%;
  -ms-flex: 0 0 8.33333333%;
  flex: 0 0 8.33333333%;
  max-width: 8.33333333%
}

.sign-container2 {
  overflow: hidden;
  padding: 1.875rem 0
}


.sign-container2 .other {
  color: #5a5a5a;
  font-size: .8125rem;
  width: 100%
}

.sign-container2 .other, .sign-container2 .other .other-item {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

.sign-container2 .other .other-item {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  border-radius: 50%;
  height: 1.5625rem;
  -webkit-justify-content: center;
  justify-content: center;
  margin-left: .625rem;
  width: 1.5625rem
}

.sign-container2 .other .other-item svg {
  font-size: .875rem
}

.sign-container2 .des-span, .sign-container2 .des-span a {
  color: #dfdbdb;
  font-size: .8125rem;
  line-height: 1.6
}

.sign-container2 .qrcode {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center
}

.sign-container2 .qrcode img {
  height: 15.625rem;
  width: 15.625rem
}

.sign-container2 .ant-btn:focus, .sign-container2 .ant-btn:hover {
  border-color: #fff !important;
  outline: 0 none !important
}

.ant-modal {
  -webkit-font-feature-settings: "tnum";
  -moz-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
  box-sizing: border-box;
  color: #000000d9;
  font-size: .875rem;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  margin: 0 auto;
  max-width: calc(100vw - 2rem);
  padding: 0 0 1.5rem;
  pointer-events: none;
  position: relative;
  top: 20%;
  width: auto
}

.ant-modal-mask {
  background-color: #00000073;
  bottom: 0;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10000
}

.ant-modal-wrap {
  -webkit-overflow-scrolling: touch;
  bottom: 0;
  left: 0;
  outline: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10000
}

.ant-modal-content {
  background-clip: padding-box;
  border: 0;
  border-radius: .25rem;
  box-shadow: 0 .1875rem .375rem -.25rem #0000001f, 0 .375rem 1rem #00000014, 0 .5625rem 1.75rem .5rem #0000000d;
  pointer-events: auto;
  position: relative;
  background:#fff;
  background-position: left;
  padding:20px;
  color:#fff;
}

.ant-modal-close {
  background: transparent;
  border: 0;
  color: #00000073;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  outline: 0;
  padding: 0;
  position: absolute;
  right: 0;
  text-decoration: none;
  top: 0;
  -webkit-transition: color .3s;
  transition: color .3s;
  z-index: 10
}

.ant-modal-close-x {
  display: block;
  font-size: 1rem;
  font-style: normal;
  height: 3.5rem;
  line-height: 3.5rem;
  text-align: center;
  text-rendering: auto;
  text-transform: none;
  width: 3.5rem
}

.ant-modal-close:focus, .ant-modal-close:hover {
  color: #000000bf;
  text-decoration: none
}

.ant-modal-body {
  word-wrap: break-word;
  font-size: .875rem;
  line-height: 1.5715;
}

@media (max-width: 767px) {
  .ant-modal {
    margin: .5rem auto;
    max-width: calc(100vw - 1rem)
  }
}

.el-form {
  --el-form-label-font-size: var(--el-font-size-base);
  --el-form-inline-content-width: 13.75rem
}

.el-form-item {
  --font-size: .875rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1.125rem
}

.el-form-item__content {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-flex: 1;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 2rem;
  min-width: 0;
  position: relative
}

.ant-btn {
  background-image: none;
  background: #fff;
  border: .0625rem solid #d9d9d9;
  border-radius: .25rem;
  box-shadow: 0 .125rem #00000004;
  color: #000000d9;
  cursor: pointer;
  display: inline-block;
  font-size: .875rem;
  font-weight: 400;
  height: 2.1875rem;
  line-height: 1.5715;
  padding: .34375rem 12px;
  position: relative;
  text-align: center;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
  transition: all .3s cubic-bezier(.645, .045, .355, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap
}

.ant-btn, .ant-btn:active, .ant-btn:focus {
  outline: 0
}

.ant-btn:not([disabled]):hover {
  text-decoration: none
}

.ant-btn:not([disabled]):active {
  box-shadow: none;
  outline: 0
}

.ant-btn-lg {
  border-radius: .25rem;
  font-size: 1rem;
  height: 2.5rem;
  padding: .4rem 12px
}

.ant-btn:focus, .ant-btn:hover {
  background: #fff;
  border-color: #484a4d;
  color: #484a4d
}

.ant-btn:active {
  background: #fff;
  border-color: #13161a;
  color: #13161a
}

.ant-btn:active, .ant-btn:focus, .ant-btn:hover {
  background: #fff;
  text-decoration: none
}

.ant-btn > span {
  display: inline-block
}

.ant-btn-primary {
  background: #45c985;
  border-color: #45c985;
  box-shadow: 0 .125rem #0000000b;
  color: #fff;
  text-shadow: 0 -.0625rem 0 rgba(0, 0, 0, .12)
}

.ant-btn-primary:focus, .ant-btn-primary:hover {
  background: #089047;
  border-color: #089047;
  color: #fff
}

.ant-btn-primary:active {
  background: #13161a;
  border-color: #13161a;
  color: #fff
}

.ant-btn:before {
  background: #fff;
  border-radius: inherit;
  bottom: -.0625rem;
  content: "";
  display: none;
  left: -.0625rem;
  opacity: .35;
  pointer-events: none;
  position: absolute;
  right: -.0625rem;
  top: -.0625rem;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
  z-index: 1
}

.ant-btn:active > span, .ant-btn:focus > span {
  position: relative
}

.el-input--large .el-input__wrapper {
  padding: 0.0625rem 012px;
}

.el-input {
  --el-input-text-color: var(--el-text-color-regular);
  --el-input-border: var(--el-border);
  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-focus-border: var(--el-color-primary);
  --el-input-transparent-border: 0 0 0 .0625rem transparent inset;
  --el-input-border-color: var(--el-border-color);
  --el-input-border-radius: var(--el-border-radius-base);
  --el-input-bg-color: var(--el-fill-color-blank);
  --el-input-icon-color: var(--el-text-color-placeholder);
  --el-input-placeholder-color: var(--el-text-color-placeholder);
  --el-input-hover-border-color: var(--el-border-color-hover);
  --el-input-clear-hover-color: var(--el-text-color-secondary);
  --el-input-focus-border-color: var(--el-color-primary);
  --el-input-width: 100%;
  --el-input-height: var(--el-component-size);
  box-sizing: border-box;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: var(--el-font-size-base);
  line-height: var(--el-input-height);
  position: relative;
  vertical-align: middle;
  width: var(--el-input-width)
}

.el-input::-webkit-scrollbar {
  width: .375rem;
  z-index: 11
}

.el-input::-webkit-scrollbar:horizontal {
  height: .375rem
}

.el-input::-webkit-scrollbar-thumb {
  background: var(--el-text-color-disabled);
  border-radius: .3125rem;
  width: .375rem
}

.el-input::-webkit-scrollbar-corner,.el-input::-webkit-scrollbar-track {
  background: var(--el-fill-color-blank)
}

.el-input::-webkit-scrollbar-track-piece {
  background: var(--el-fill-color-blank);
  width: .375rem
}

.el-input .el-input__clear,.el-input .el-input__password {
  color: var(--el-input-icon-color);
  cursor: pointer;
  font-size: .875rem
}

.el-input .el-input__clear:hover,.el-input .el-input__password:hover {
  color: var(--el-input-clear-hover-color)
}

.el-input .el-input__count {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  color: var(--el-color-info);
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: .75rem;
  height: 100%
}

.el-input .el-input__count .el-input__count-inner {
  background: var(--el-fill-color-blank);
  display: inline-block;
  line-height: normal;
  padding-left: .5rem
}

.el-input__wrapper {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: var(--el-input-bg-color,var(--el-fill-color-blank));
  background-image: none;
  border-radius: var(--el-input-border-radius,var(--el-border-radius-base));
  box-shadow: 0 0 0 .0625rem var(--el-input-border-color,var(--el-border-color)) inset;
  cursor: text;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  -webkit-justify-content: center;
  justify-content: center;
  padding: .0625rem .6875rem;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: var(--el-transition-box-shadow);
  transition: var(--el-transition-box-shadow)
}

.el-input__wrapper:hover {
  box-shadow: 0 0 0 .0625rem var(--el-input-hover-border-color) inset
}

.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 .0625rem var(--el-input-focus-border-color) inset
}

.el-input__inner {
  padding-left:10px!important;
  --el-input-inner-height: calc(var(--el-input-height, 32px) - .125rem);
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  -webkit-appearance: none;
  background: none;
  border: none;
  box-sizing: border-box;
  color: var(--el-input-text-color,var(--el-text-color-regular));
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-size: inherit;
  height: var(--el-input-inner-height);
  line-height: var(--el-input-inner-height);
  outline: none;
  padding-left: 6px;
  width: 100%
}

.el-input__inner:focus {
  outline: none
}

.el-input__inner::-webkit-input-placeholder {
  color: var(--el-input-placeholder-color,var(--el-text-color-placeholder))
}

.el-input__inner::-moz-placeholder {
  color: var(--el-input-placeholder-color,var(--el-text-color-placeholder))
}

.el-input__inner:-ms-input-placeholder {
  color: var(--el-input-placeholder-color,var(--el-text-color-placeholder))
}

.el-input__inner::placeholder {
  color: var(--el-input-placeholder-color,var(--el-text-color-placeholder))
}

.el-input__inner[type=password]::-ms-reveal {
  display: none
}

.el-input__prefix {
  -ms-flex-negative: 0;
  color: var(--el-input-icon-color,var(--el-text-color-placeholder));
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  pointer-events: none;
  text-align: center;
  -webkit-transition: all var(--el-transition-duration);
  transition: all var(--el-transition-duration);
  white-space: nowrap
}

.el-input__prefix,.el-input__prefix-inner {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex
}

.el-input__prefix-inner {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  pointer-events: all
}

.el-input__prefix-inner>:last-child {
  margin-right: .5rem
}

.el-input__prefix-inner>:first-child,.el-input__prefix-inner>:first-child.el-input__icon {
  margin-left: 0
}

.el-input__suffix {
  -ms-flex-negative: 0;
  color: var(--el-input-icon-color,var(--el-text-color-placeholder));
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  pointer-events: none;
  text-align: center;
  -webkit-transition: all var(--el-transition-duration);
  transition: all var(--el-transition-duration);
  white-space: nowrap
}

.el-input__suffix,.el-input__suffix-inner {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex
}

.el-input__suffix-inner {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  pointer-events: all
}

.el-input__suffix-inner>:first-child {
  margin-left: .5rem
}

.el-input .el-input__icon {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: inherit;
  -webkit-justify-content: center;
  justify-content: center;
  line-height: inherit;
  margin-left: .5rem;
  -webkit-transition: all var(--el-transition-duration);
  transition: all var(--el-transition-duration)
}

.el-input__validateIcon {
  pointer-events: none
}

.el-input.is-active .el-input__wrapper {
  box-shadow: 0 0 0 .0625rem var(--el-input-focus-color, ) inset
}

.el-input.is-disabled {
  cursor: not-allowed
}

.el-input.is-disabled .el-input__wrapper {
  background-color: var(--el-disabled-bg-color);
  box-shadow: 0 0 0 .0625rem var(--el-disabled-border-color) inset
}

.el-input.is-disabled .el-input__inner {
  -webkit-text-fill-color: var(--el-disabled-text-color);
  color: var(--el-disabled-text-color);
  cursor: not-allowed
}

.el-input.is-disabled .el-input__inner::-webkit-input-placeholder {
  color: var(--el-text-color-placeholder)
}

.el-input.is-disabled .el-input__inner::-moz-placeholder {
  color: var(--el-text-color-placeholder)
}

.el-input.is-disabled .el-input__inner:-ms-input-placeholder {
  color: var(--el-text-color-placeholder)
}

.el-input.is-disabled .el-input__inner::placeholder {
  color: var(--el-text-color-placeholder)
}

.el-input.is-disabled .el-input__icon {
  cursor: not-allowed
}

.el-input.is-exceed .el-input__wrapper {
  box-shadow: 0 0 0 .0625rem var(--el-color-danger) inset
}

.el-input.is-exceed .el-input__suffix .el-input__count {
  color: var(--el-color-danger)
}

.anticon {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: inherit;
  display: inline-block;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-rendering: optimizelegibility;
  text-transform: none;
  vertical-align: -0.125em;
}

.el-input--large {
  --el-input-height: var(--el-component-size-large);
  font-size: .875rem;
}

.el-input--large .el-input__wrapper {
  padding: .0625rem 12px
}

.el-input--large .el-input__inner {
  --el-input-inner-height: calc(var(--el-input-height, 40px) - .125rem)
}

.el-input--small {
  --el-input-height: var(--el-component-size-small);
  font-size: .75rem
}

.el-input--small .el-input__wrapper {
  padding: .0625rem .4375rem
}

.el-input--small .el-input__inner {
  --el-input-inner-height: calc(var(--el-input-height, 24px) - .125rem)
}

.el-input-group {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  width: 100%
}

.el-input-group,.el-input-group__append,.el-input-group__prepend {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex
}

.el-input-group__append,.el-input-group__prepend {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: var(--el-fill-color-light);
  border-radius: var(--el-input-border-radius);
  color: var(--el-color-info);
  -webkit-justify-content: center;
  justify-content: center;
  min-height: 100%;
  padding: 0 1.25rem;
  position: relative;
  white-space: nowrap
}

.el-input-group__append:focus,.el-input-group__prepend:focus {
  outline: none
}

.el-input-group__append .el-button,.el-input-group__append .el-select,.el-input-group__prepend .el-button,.el-input-group__prepend .el-select {
  display: inline-block;
  margin: 0 -1.25rem
}

.el-input-group__append button.el-button,.el-input-group__append button.el-button:hover,.el-input-group__append div.el-select .el-input__wrapper,.el-input-group__append div.el-select:hover .el-input__wrapper,.el-input-group__prepend button.el-button,.el-input-group__prepend button.el-button:hover,.el-input-group__prepend div.el-select .el-input__wrapper,.el-input-group__prepend div.el-select:hover .el-input__wrapper {
  background-color: transparent;
  border-color: transparent;
  color: inherit
}

.el-input-group__append .el-button,.el-input-group__append .el-input,.el-input-group__prepend .el-button,.el-input-group__prepend .el-input {
  font-size: inherit
}

.el-input-group__prepend {
  border-bottom-right-radius: 0;
  border-right: 0;
  border-top-right-radius: 0;
  box-shadow: .0625rem 0 0 0 var(--el-input-border-color) inset,0 .0625rem 0 0 var(--el-input-border-color) inset,0 -.0625rem 0 0 var(--el-input-border-color) inset
}

.el-input-group__append {
  border-left: 0;
  box-shadow: 0 .0625rem 0 0 var(--el-input-border-color) inset,0 -.0625rem 0 0 var(--el-input-border-color) inset,-.0625rem 0 0 0 var(--el-input-border-color) inset
}

.el-input-group--prepend>.el-input__wrapper,.el-input-group__append {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0
}

.el-input-group--prepend .el-input-group__prepend .el-select .el-input .el-input__inner {
  box-shadow: none!important
}

.el-input-group--prepend .el-input-group__prepend .el-select .el-input .el-input__wrapper {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  box-shadow: .0625rem 0 0 0 var(--el-input-border-color) inset,0 .0625rem 0 0 var(--el-input-border-color) inset,0 -.0625rem 0 0 var(--el-input-border-color) inset
}

.el-input-group--prepend .el-input-group__prepend .el-select .el-input.is-focus .el-input__inner {
  box-shadow: none!important
}

.el-input-group--prepend .el-input-group__prepend .el-select .el-input.is-focus .el-input__wrapper,.el-input-group--prepend .el-input-group__prepend .el-select .el-input.is-focus .el-input__wrapper:focus {
  box-shadow: .0625rem 0 0 0 var(--el-input-focus-border-color) inset,.0625rem 0 0 0 var(--el-input-focus-border-color),0 .0625rem 0 0 var(--el-input-focus-border-color) inset,0 -.0625rem 0 0 var(--el-input-focus-border-color) inset!important;
  z-index: 2
}

.el-input-group--prepend .el-input-group__prepend .el-select .el-input.is-focus .el-input__wrapper:focus {
  outline: none
}

.el-input-group--prepend .el-input-group__prepend .el-select:hover .el-input__inner {
  box-shadow: none!important
}

.el-input-group--prepend .el-input-group__prepend .el-select:hover .el-input__wrapper {
  box-shadow: .0625rem 0 0 0 var(--el-input-hover-border-color) inset,.0625rem 0 0 0 var(--el-input-hover-border-color),0 .0625rem 0 0 var(--el-input-hover-border-color) inset,0 -.0625rem 0 0 var(--el-input-hover-border-color) inset!important;
  z-index: 1
}

.el-input-group--append>.el-input__wrapper {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0
}

.el-input-group--append .el-input-group__append .el-select .el-input .el-input__inner {
  box-shadow: none!important
}

.el-input-group--append .el-input-group__append .el-select .el-input .el-input__wrapper {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  box-shadow: 0 .0625rem 0 0 var(--el-input-border-color) inset,0 -.0625rem 0 0 var(--el-input-border-color) inset,-.0625rem 0 0 0 var(--el-input-border-color) inset
}

.el-input-group--append .el-input-group__append .el-select .el-input.is-focus .el-input__inner {
  box-shadow: none!important
}

.el-input-group--append .el-input-group__append .el-select .el-input.is-focus .el-input__wrapper {
  box-shadow: -.0625rem 0 0 0 var(--el-input-focus-border-color),-.0625rem 0 0 0 var(--el-input-focus-border-color) inset,0 .0625rem 0 0 var(--el-input-focus-border-color) inset,0 -.0625rem 0 0 var(--el-input-focus-border-color) inset!important;
  z-index: 2
}

.el-input-group--append .el-input-group__append .el-select:hover .el-input__inner {
  box-shadow: none!important
}

.el-input-group--append .el-input-group__append .el-select:hover .el-input__wrapper {
  box-shadow: -.0625rem 0 0 0 var(--el-input-hover-border-color),-.0625rem 0 0 0 var(--el-input-hover-border-color) inset,0 .0625rem 0 0 var(--el-input-hover-border-color) inset,0 -.0625rem 0 0 var(--el-input-hover-border-color) inset!important;
  z-index: 1
}

.css-7gltpu {
  right: 0;
  width: 100px;
  height: 2rem;
  font-size: var(--chakra-fontSizes-md);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: absolute;
  top: 4px;
  z-index: 2;
}
#login_container{position: relative}
.refresh-link{
  position: absolute;
  display: block;
  bottom:0px;
  right:-85px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  display: flex;justify-content: center;
  align-items: center;
  background: rgba(255,255,255,.9);
}
</style>
